<template>
  <div class="main">
    <img class="bgImg hidden-xs-only" src="@/assets/images/background.png" alt="" />
    <img class="phoneImg" src="@/assets/images/phoneBg.jpg" alt="" />
    <div class="inner">
      <div class="topCont">
        <div class="pledgeTitle wow fadeInDownBig">
          <h1>{{ $t('ismsg.pledgeDetails.title') }}</h1>
          <p class="subtitle fs-12">{{ $t('ismsg.pledgeDetails.subtitle') }}</p>
          <p class="text fs-12">{{ $t('ismsg.pledgeDetails.text') }}</p>
        </div>
        <div class="banner wow fadeInTopRight">
          <div class="box">
            <p class="number fs-22">{{ formatNumber(axiePledgeTotal) }}</p>
            <p class="text fs-14">{{ $t('ismsg.pledgeDetails.text1') }}</p>
          </div>
        </div>
        <el-row :gutter="20" class="btnGroups wow fadeInTopLeft">
          <el-col :lg="8" :md="12" :xs="24">
            <div class="item pledge">
              <div class="itemLeft">
                <p class="no fs-14">{{ formatNumber(axieBalance) }}</p>
                <p class="text fs-12">{{ $t('ismsg.pledgeDetails.btns[0].text') }}</p>
              </div>
              <div class="btn fs-14" @click="handlePledge">
                {{ $t('ismsg.pledgeDetails.btns[0].title') }}
                <span class="iconfont icon-arrow_right_fat"></span>
              </div>
            </div>
          </el-col>
          <el-col :lg="8" :md="12" :xs="24" class="secure">
            <div class="item">
              <div class="itemLeft">
                <p class="no fs-14">{{ formatNumber(axieBalancePledge) }}</p>
                <p class="text fs-12">{{ $t('ismsg.pledgeDetails.btns[1].text') }}</p>
              </div>
            </div>
          </el-col>
          <el-col :lg="8" :md="12" :xs="24">
            <div class="item receive">
              <div class="itemLeft">
                <p class="no fs-14">{{ formatNumber(axieClaimable) }}</p>
                <p class="text fs-12">{{ $t('ismsg.pledgeDetails.btns[2].text') }}</p>
              </div>
              <div class="btn fs-14" @click="doBonusWithdraw">
                {{ $t('ismsg.pledgeDetails.btns[2].title') }}
                <span class="iconfont icon-arrow_right_fat"></span>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="game">
          <el-popover
            :teleported="false"
            :popper-style="{ width: '270px', backgroundColor: '#fffaf1', borderRadius: '20px' }"
            placement="bottom-end"
            trigger="click">
            <template #reference>
              <div class="gameInner wow fadeIn">
                <img src="@/assets/images/game.png" alt="" />
                <span class="hidden-sm-only fs-12">{{ $t('ismsg.pledgeDetails.game.title') }}</span>
              </div>
            </template>
            <div class="gameCont">
              <p class="number fs-14">
                <span class="fs-18">{{ formatNumber(axieClaimable_) }}</span>
                $AXIE
              </p>
              <p class="text fs-12">
                {{ $t('ismsg.pledgeDetails.game.text') }} {{ bonusCostScale * 100 }}
                {{ $t('ismsg.pledgeDetails.game.text2') }}
              </p>
            </div>
          </el-popover>
        </div>
      </div>
      <div class="cont">
        <div class="titleBox wow bounceInUp">
          <p class="title fs-14">{{ $t('ismsg.pledgeDetails.table.title') }}</p>
          <p class="team fs-12" @click="showDialog = true">
            {{ $t('ismsg.pledgeDetails.teamRules.title') }} <i class="iconfont icon-wenhao"></i>
          </p>
        </div>
        <div class="reward wow bounceInLeft">
          <p class="fs-12">
            {{ $t('ismsg.pledgeDetails.table.reward') }}
            <span class="fs-14">{{ formatNumber(inviteTotal) }}</span>
            $AXIE
          </p>
          <!-- <p class="fs-12">
            {{ $t('ismsg.pledgeDetails.table.reward2') }} <span class="fs-14">{{ 0 }}</span
            >$AXIE
          </p> -->
        </div>
        <div class="table wow bounceInUp">
          <div class="tableHead">
            <span class="fs-12"> {{ $t('ismsg.pledgeDetails.table.head.index') }} </span>
            <span class="fs-12"> {{ $t('ismsg.pledgeDetails.table.head.time') }} </span>
            <span class="fs-12"> {{ $t('ismsg.pledgeDetails.table.head.address') }} </span>
          </div>
          <div class="tableList" v-for="(item, index) in tableData" :key="index">
            <span class="fs-12 index">{{ index + 1 }}</span>
            <span class="fs-12 time">{{ formatDate(item.time) }}</span>
            <span class="fs-12 link">
              <a :href="`https://bscscan.com/address/${item._id}`" target="_blank" rel="noopener noreferrer">
                {{ formatAddr(item._id) }}
              </a>
            </span>
          </div>
        </div>
      </div>
      <div class="cont">
        <div class="titleBox wow bounceInUp">
          <p class="title fs-14">{{ $t('ismsg.pledgeDetails.table2.title') }}</p>
        </div>
        <div class="table wow bounceInUp">
          <div class="tableHead tableHead2">
            <span class="fs-12"> {{ $t('ismsg.pledgeDetails.table2.head.index') }} </span>
            <span class="fs-12"> {{ $t('ismsg.pledgeDetails.table2.head.time') }} </span>
            <span class="fs-12"> {{ $t('ismsg.pledgeDetails.table2.head.amount') }} </span>
            <span class="fs-12"> {{ $t('ismsg.pledgeDetails.table2.head.hash') }} </span>
          </div>
          <div class="tableList tableList2" v-for="(item, index) in tableData2" :key="index">
            <span class="fs-12">{{ index + 1 }}</span>
            <span class="fs-12">{{ formatDate(item.time) }}</span>
            <span class="fs-12">{{ formatNumber(item.cnt) }}</span>
            <span class="fs-12">
              <a :href="`https://bscscan.com/tx/${item._id}`" target="_blank" rel="noopener noreferrer">
                {{ formatAddr(item._id) }}
              </a>
            </span>
            <span class="fs-12">
              <button class="btn" v-if="!item.hashGet" @click="doPledgeGet(item._id)">
                {{ $t('ismsg.pledgeDetails.btns[1].title') }}
              </button>
            </span>
          </div>
        </div>
      </div>
      <div class="cont">
        <div class="titleBox wow bounceInUp">
          <p class="title fs-14">{{ $t('ismsg.pledgeDetails.table3.title') }}</p>
        </div>
        <div class="table wow bounceInUp">
          <div class="tableHead tableHead2">
            <span class="fs-12"> {{ $t('ismsg.pledgeDetails.table3.head.index') }} </span>
            <span class="fs-12"> {{ $t('ismsg.pledgeDetails.table3.head.time') }} </span>
            <span class="fs-12"> {{ $t('ismsg.pledgeDetails.table3.head.amount') }} </span>
            <span class="fs-12"> {{ $t('ismsg.pledgeDetails.table3.head.hash') }} </span>
          </div>
          <div class="tableList tableList2" v-for="(item, index) in tableData3" :key="index">
            <span class="fs-12">{{ index + 1 }}</span>
            <span class="fs-12">{{ formatDate(item.time) }}</span>
            <span class="fs-12">{{ formatNumber(item.cnt) }}</span>
            <span class="fs-12">
              <a :href="`https://bscscan.com/tx/${item._id}`" target="_blank" rel="noopener noreferrer">
                {{ formatAddr(item._id) }}
              </a>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div :class="{ show: showDialog }" class="pledgeDialog">
    <div class="pledgeDialogInner">
      <div class="title">
        <i class="iconfont icon-dengpao"></i> <span>{{ $t('ismsg.pledgeDetails.teamRules.title') }}</span>
      </div>
      <p class="subtitle">{{ $t('ismsg.pledgeDetails.teamRules.subtitle') }}</p>
      <div class="text">
        <p class="fs-12">{{ $t('ismsg.pledgeDetails.teamRules.text1') }}</p>
        <p class="fs-12">{{ $t('ismsg.pledgeDetails.teamRules.text2') }}</p>
        <p class="fs-12">{{ $t('ismsg.pledgeDetails.teamRules.text3') }}</p>
      </div>
      <div class="confirmBtn" @click="showDialog = false">
        <span>{{ $t('ismsg.pledgeDetails.teamRules.btn') }}</span>
      </div>
      <span class="clock" @click="showDialog = false">×</span>
    </div>
  </div>
  <!-- custom-class="dialog" -->
  <el-dialog v-model="dialogVisible" width="fit-content" :title="$t('ismsg.pledgeDetails.btns[0].title')">
    <div class="dialogInput">
      <el-input v-model.number="dialogInput" />
    </div>
    <template #footer>
      <div class="dialogFooter">
        <el-button @click="dialogVisible = false">{{ $t('ismsg.btns.cancelText') }}</el-button>
        <el-button type="primary" @click="doPledgePut">
          {{ $t('ismsg.btns.confirmText') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, onMounted, watchEffect } from 'vue';
import { useMainStore } from '@/store/index';
import { useI18n } from 'vue-i18n';
import { ElMessage } from 'element-plus';
import { formatAddr, formatDate, formatNumber, formatNumberNoSeparator } from '@/utils/common';
import { util, axieContract, getSigner, getBnbBalance, getUsdtBalance, getAxieBalance } from '@/a-wallet';

const { t: lang } = useI18n();
const mainStore = useMainStore();

const tableData: any = ref([]);
const tableData2: any = ref([]);
const tableData3: any = ref([]);
const showDialog = ref(false);
const dialogVisible = ref(false);
const dialogInput: any = ref(null);
const axiePledgeTotal = ref(0);
const axieBalance = ref(0);
const axieBalancePledge = ref(0);
const axieClaimable = ref(0);
const axieClaimable_ = ref(0);
const inviteTotal = ref(0);
const bonusCostScale = ref(0);

onMounted(() => {
  watchEffect(async () => {
    if (mainStore.baseData) {
      const { walletAccount, baseData }: any = mainStore;

      tableData.value = baseData.invites;
      tableData2.value = baseData.pledgePutHistorys;
      tableData3.value = baseData.pledgeWithdrawHistorys;
      bonusCostScale.value = baseData.bonusCostScale;
      inviteTotal.value = baseData.pledgeBonusInvite + baseData.pledgeAirdropInvite; // Total reward

      axieClaimable_.value = baseData.pledgeWithdraw * baseData.bonusCostScale; // Chain game gold pool
      console.log('领取收益时扣除', axieClaimable_.value);

      const claimable =
        baseData.pledgeBonus + baseData.pledgeBonusInvite + baseData.pledgeAirdropInvite - baseData.pledgeWithdraw; // Claimable income $AXIE
      axieClaimable.value = Number(formatNumberNoSeparator(claimable));
      console.log('可领取的AXIE', axieClaimable.value);

      axiePledgeTotal.value = await getAxieBalance(
        axieContract(baseData.axieContractAddress),
        baseData.pledgePutAddress
      );
      console.log('全网质押的AXIE', axiePledgeTotal.value);

      axieBalance.value = await getAxieBalance(axieContract(baseData.axieContractAddress), walletAccount);
      console.log('我的AXIE余额', axieBalance.value);

      axieBalancePledge.value = 0;
      if (baseData.pledgePutHistorys.length > 0) {
        baseData.pledgePutHistorys.forEach((element: any) => {
          if (element.hashGet) return;
          axieBalancePledge.value += element.cnt;
        });
      }
      console.log('我质押的AXIE', axieBalancePledge.value);
    }
  });
});

// 5. 质押AXIE1
const doPledgePut = async () => {
  if (mainStore.loading) return;
  const { walletAccount, baseData }: any = mainStore;

  if (!dialogInput.value || dialogInput.value < 1 || !Number.isInteger(dialogInput.value))
    return ElMessage(lang('ismsg.tips.assetCnt'));

  axieBalance.value = await getAxieBalance(axieContract(baseData.axieContractAddress), walletAccount);
  if (dialogInput.value > axieBalance.value) return ElMessage(lang('ismsg.tips.amountNotEnoughAxie'));

  const bnbBalance = await getBnbBalance(walletAccount);
  const gas = (baseData.gasPriceAxie1 * baseData.gasLimitAxie1) / 1e18;
  if (bnbBalance < gas) return ElMessage(lang('ismsg.tips.amountNotEnoughBnb'));

  mainStore.setLoading(true);
  try {
    const tx = await axieContract(baseData.axieContractAddress)
      .connect(getSigner())
      .transfer(baseData.pledgePutAddress, util.parseUnits(dialogInput.value.toString()), {
        gasLimit: baseData.gasLimitAxie1,
        gasPrice: baseData.gasPriceAxie1.toString()
      });
    await tx.wait();
    mainStore.setLoading(false);
    dialogVisible.value = false;
    ElMessage.success(lang('ismsg.tips.pledgePutSuccess'));
  } catch (error) {
    mainStore.setLoading(false);
    console.error('Error sending transaction:', error);
  }
};

// 6. 解锁质押
const doPledgeGet = async (hashGet: string) => {
  if (!hashGet) return;
  if (mainStore.loading) return;
  const { walletAccount, baseData }: any = mainStore;

  const bnbBalance = await getBnbBalance(walletAccount);
  const amountNeed = baseData.gasFeeExtraWorth / baseData.bnbUsdtRatio;
  const gas = (baseData.gasPriceAxie1 * baseData.gasLimitAxie1) / 1e18;
  if (bnbBalance < amountNeed + gas) return ElMessage(lang('ismsg.tips.amountNotEnoughBnb'));

  mainStore.setLoading(true);
  try {
    const extraStr = hashGet;
    let extra = '0x';
    for (let i = 0; i < extraStr.length; i++) {
      extra += extraStr.charCodeAt(i).toString(16);
    }

    const tx = await getSigner().sendTransaction({
      from: walletAccount,
      to: baseData.pledgeGetAddress,
      value: util.parseEther(amountNeed.toFixed(6)),
      gasLimit: baseData.gasLimitAxie1,
      gasPrice: baseData.gasPriceAxie1.toString(),
      data: extra
    });
    await tx.wait();
    mainStore.setLoading(false);
    ElMessage.success(lang('ismsg.tips.pledgeGetSuccess'));
  } catch (error) {
    mainStore.setLoading(false);
    console.error('Error sending transaction:', error);
  }
};

// 7. 质押奖励和推广奖励提现
const doBonusWithdraw = async () => {
  if (mainStore.loading) return;
  const { walletAccount, baseData }: any = mainStore;

  if (!axieClaimable.value) return ElMessage(lang('ismsg.tips.amountNotEnoughClaim'));

  const bnbBalance = await getBnbBalance(walletAccount);
  const amountNeed = baseData.gasFeeExtraWorth / baseData.bnbUsdtRatio;
  const gas = (baseData.gasPriceAxie1 * baseData.gasLimitAxie1) / 1e18;
  if (bnbBalance < amountNeed + gas) return ElMessage(lang('ismsg.tips.amountNotEnoughBnb'));

  mainStore.setLoading(true);

  try {
    const extraStr = axieClaimable.value.toString();
    let extra = '0x';
    for (let i = 0; i < extraStr.length; i++) {
      extra += extraStr.charCodeAt(i).toString(16);
    }
    const tx = await getSigner().sendTransaction({
      to: baseData.pledgeWithdrawAddress,
      value: util.parseEther(amountNeed.toFixed(6)),
      data: extra
    });
    await tx.wait();
    mainStore.setLoading(false);
    ElMessage.success(lang('ismsg.tips.bbbWithdrawSuccess'));
  } catch (error) {
    mainStore.setLoading(false);
    console.error('Error sending transaction:', error);
  }
};

const handlePledge = () => {
  dialogVisible.value = true;
  dialogInput.value = null;
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  min-height: 100vh;
  padding: 15vh 0 6vh;
  height: fit-content;
  position: relative;

  .bgImg,
  .phoneImg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  }

  .phoneImg {
    display: none;
  }
}

.pledgeDialog {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -9;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.4);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

  &.show {
    z-index: 100;
    opacity: 1;
    transition: all 0.3s;
  }

  .pledgeDialogInner {
    max-width: 600px !important;
    width: 80%;
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 12px;
    position: relative;

    .title {
      font-size: 26px;
      font-weight: 700;
      text-align: center;
      line-height: 40px;
      font-family: MFBanHei_Noncommercial-Regular;
      background-image: linear-gradient(to bottom, #f99b36, #f35845);
      -webkit-background-clip: text;
      color: transparent;
      border-bottom: 2px solid rgba($color: #656565, $alpha: 0.23);

      i {
        font-size: 28px;
      }
    }

    .subtitle {
      color: #5a2a16;
      font-size: 16px;
      text-align: left;
      margin: 1vh 0;
    }

    .text p {
      font-size: 18px;
      color: #572815;
      line-height: 26px;
      padding-left: 15px;
      position: relative;

      &::before {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #572815;
        position: absolute;
        top: 9px;
        left: -5px;
      }
    }

    .confirmBtn {
      text-align: center;
      margin-top: 20px;

      span {
        display: inline-block;
        padding: 10px 20px;
        background-color: #6cae86;
        border-radius: 20px;
        color: #fff;
        overflow: hidden;
        cursor: pointer;
      }
    }

    .clock {
      position: absolute;
      top: -9px;
      right: -9px;
      z-index: 100;
      display: inline-block;
      width: 20px;
      line-height: 20px;
      background-color: #fff;
      border: 1px solid #f6a526;
      border-radius: 50%;
      color: #f6a526;
      font-size: 22px;
      text-align: center;
      cursor: pointer;
    }
  }
}

.inner {
  width: 90%;
  padding: 5% 3%;
  margin: 0 auto;
  box-sizing: border-box;
  background: url('@/assets/images/whiteBg.png') no-repeat left top;
  background-size: 100% 100%;
  position: relative;
  z-index: 9;

  .pledgeTitle {
    width: 90%;
    margin: 0 auto;

    h1 {
      font-size: 38px;
      text-align: center;
      font-family: MFBanHei_Noncommercial-Regular;
      background-image: linear-gradient(to bottom, #f99b36, #f35845);
      -webkit-background-clip: text;
      color: transparent;
    }

    p {
      font-size: 20px;
      color: #572815;
      text-align: center;
      margin: 2vh 0;
    }

    .text {
      color: #e65d40;
    }
  }

  .banner {
    max-width: 847px;
    height: 173px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: url('@/assets/images/pledgebg.png') no-repeat left top;
    background-size: 100% 100%;
    text-align: center;
    .box {
      .number {
        font-family: HYYakuHei-HEW;
        font-size: 42px;
        font-weight: bold;
        color: #4a3d2b;
      }

      .text {
        color: #572815;
        font-size: 18px;
      }
    }
  }

  .btnGroups {
    width: 100%;
    padding: 18px 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border-top: thin solid rgba($color: #656565, $alpha: 0.23);
    border-bottom: thin solid rgba($color: #656565, $alpha: 0.23);

    .item {
      width: 90%;
      margin: 0 auto;
      padding: 1.5vh 0;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .itemLeft {
        .no {
          font-family: HYYakuHei-HEW;
          font-size: 32px;
        }

        .text {
          font-size: 18px;
          color: #6b4d41;
        }
      }

      .btn {
        display: inline-block;
        padding: 8px 10px;
        min-width: 120px;
        text-align: center;
        font-family: AdobeHeitiStd-Regular;
        font-size: 18px;
        color: #fff;
        border-radius: 23px;
        cursor: pointer;
      }
    }

    .pledge {
      .no {
        color: #43a1e8;
      }

      .btn {
        background-color: #43a1e8;
      }
    }

    .secure {
      border-left: thin solid rgba($color: #656565, $alpha: 0.23);
      border-right: thin solid rgba($color: #656565, $alpha: 0.23);

      .no {
        color: #6cae86;
      }

      .btn {
        background-color: #6cae86;
      }
    }

    .receive {
      .no {
        color: #f6a526;
      }

      .btn {
        background-color: #f6a526;
      }
    }
  }

  .cont {
    width: 100%;
    padding-top: 10px;
    position: relative;

    > .reward {
      display: flex;
      justify-content: space-around;

      p {
        color: #6b4d41;
        font-size: 16px;
        line-height: 40px;
        height: 40px;
        font-weight: 600;
        font-family: AdobeHeitiStd-Regular;
        margin-right: 10px;

        span {
          color: #f6a526;
          font-size: 22px;
          font-family: HYYakuHei-HEW;
          padding: 0 5px;
        }
      }
    }

    .titleBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;

      .title {
        display: inline-block;
        line-height: 40px;
        color: #6b4d41;
        font-size: 22px;
        font-family: AdobeHeitiStd-Regular;
        font-weight: 600;
        border-radius: 10px 0 0 0;
        overflow: hidden;
      }

      .team {
        font-size: 18px;
        color: #f6a526;
        cursor: pointer;
      }
    }

    .table {
      width: 100%;
      background-color: #fff;
      padding: 10px;
      border-radius: 0 10px 10px 10px;

      .tableHead,
      .tableList {
        width: 100%;
        padding: 8px 0;
        display: flex;
        text-align: center;
        span {
          width: calc((100% - 80px) / 2);
          &:nth-child(1) {
            width: 80px;
          }
        }
      }
      .tableHead {
        color: #6b4d41;
        font-size: 18px;
        font-weight: 600;
      }

      .tableList {
        color: #b48775;
        font-size: 16px;
        border-top: thin solid rgba($color: #656565, $alpha: 0.23);
      }
      .tableHead2,
      .tableList2 {
        span {
          width: calc((100% - 80px) / 4);
          &:nth-child(1) {
            width: 80px;
          }
        }
        .btn {
          width: fit-content;
          padding: 0 10px;
          text-align: center;
          font-family: AdobeHeitiStd-Regular;
          font-size: 18px;
          color: #fff;
          background-color: #6cae86;
          border-radius: 23px;
          cursor: pointer;
        }
      }
    }
  }

  .game {
    position: absolute;
    top: 3vh;
    right: 3%;
    z-index: 8;
    cursor: pointer;

    .gameInner {
      padding: 8px 15px;
      background-color: #fffaf1;
      box-shadow: 0px 3px 16px 0px rgba(116, 55, 46, 0.11);
      border-radius: 20px;

      span {
        font-size: 14px;
        color: #572815;
        margin-left: 6px;
      }

      img {
        width: 32px;
        vertical-align: middle;
      }
    }

    .gameCont {
      .number {
        color: #6b4d41;
        font-size: 16px;

        span {
          font-size: 28px;
          color: #4a3d2b;
          font-weight: 600;
          font-family: HYYakuHei-HEW;
        }
      }

      .text {
        font-size: 14px;
        font-family: AdobeHeitiStd-Regular;
        color: #e65d40;
      }
    }
  }
}

@media screen and (max-width: 1200px) {
  .inner .secure {
    border-right: none !important;
  }
}

@media screen and (max-width: 992px) {
  .inner {
    .secure {
      border-left: none !important;
    }

    .cont {
      > .reward {
        position: static;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .phoneImg {
    display: block !important;
  }

  .inner {
    width: 90%;
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
    background: none;

    .topCont {
      padding: 5% 3%;
      background: url('@/assets/images/whiteBg.png') no-repeat left top;
      background-size: 100% 100%;

      .btnGroups {
        border: none;

        .item {
          border-bottom: thin solid rgba($color: #656565, $alpha: 0.23);

          &.receive {
            border: none;
          }
        }
      }

      .game {
        position: static !important;

        .gameInner {
          width: 70%;
          text-align: center;
          margin: 0 auto;

          span {
            font-weight: bold;
          }
        }
      }
    }

    .cont {
      padding: 5% 3%;
      background: url('@/assets/images/whiteBg.png') no-repeat left top;
      background-size: 100% 100%;

      .pledgeTitle {
        font-size: 16px;
        padding-left: 30px;
      }

      .reward {
        background-color: #ffffff;
        box-shadow: 0px 3px 6px 2px rgba(246, 165, 38, 0.6);
        border-radius: 12px;
        margin-bottom: 2vh;
      }
      .table {
        .tableHead,
        .tableList {
          span {
            width: calc((100% - 30px) / 2);
            &:nth-child(1) {
              width: 30px;
            }
          }
        }
        .tableHead {
          span {
            font-size: 14px;
          }
        }
        .tableList {
          span {
            font-size: 12px;
          }
        }
        .tableHead2,
        .tableList2 {
          span {
            width: calc((100% - 30px) / 4);
            &:nth-child(1) {
              width: 30px;
            }
          }
          .btn {
            padding: 0 5px;
            font-size: 12px;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 500px) {
  .inner {
    font-size: 14px;
    background: none;

    .topCont,
    .cont {
      padding: 8% 3%;
    }

    .pledgeTitle {
      width: 100%;

      h1 {
        font-size: 24px !important;
      }

      p {
        font-size: 16px;
      }
    }

    .titleBox .title {
      font-size: 18px !important;
    }

    .banner {
      height: auto;
      background: url('@/assets/images/pledgeBgPhone.png') no-repeat left top;
      background-size: 100% 100%;

      .number {
        font-size: 32px !important;
      }
    }

    .btnGroups .item {
      .no {
        font-size: 20px !important;
      }

      .text {
        font-size: 14px !important;
      }

      .btn {
        font-size: 14px !important;
      }
    }
  }
}
</style>
